<template>
	<view style="padding: 10px 0;">
		<div :class="{ 'card': true, 'cardFlexEnd': item.role == 'user', 'sysDialog': item.role !== 'user', 'commonDialog': item.role == 'user' }"
			v-for="(item, i) in contentList" :key="i" @longpress="copy(item.content)">
			<img v-if="item.role !== 'user'" src="../../static/images/b965cee4-bb5f-4c63-a8e4-299bc2c4252b.png" alt=""
				srcset="">
			<div :class="{ 'context': true }">
				<span v-if="item.content=='wait'" class="point-flicker"></span>
				<span v-else>{{item.content.trim()}}</span>
			</div>
			<img style="width:0" v-if="item.role == 'user'"
				src="https://bjb.openstorage.cn/v1/yjcbb/public/profile/1571207145304_944060.jpg" alt="" srcset="">
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			contentList: {
				type: Array
			}
		},
		data() {
			return {

			};
		},
		created() {
			console.log(this.contentList);
		},
		methods: {
			copy(data) {
				uni.setClipboardData({
					data: data,
					success() {
						uni.showToast({
							title: "内容已复制",
							icon: 'none'
						})
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	$contentWidth: 700px;
	$themeColor: rgba(119, 171, 250, 0.1);
	$commonColor: rgba(225, 225, 225, 0.1);
	$themeRadius: 5px;

	.sysDialog {
		background: $themeColor !important;
		color: rgb(21, 32, 52) !important;

		&:active {
			background: rgba(119, 171, 250, 0.18) !important;
		}
	}

	.commonDialog {
		background: $commonColor !important;
		color: rgb(68, 68, 68) !important;
		// box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.03) !important;

		&:active {
			background: #f9f9f9 !important;
		}
	}

	.cardFlexEnd {
		justify-content: flex-end;
		margin-right: -10px;
	}

	.card {
		display: flex;
		margin: 0 10px 10px 10px;
		padding: 5px;
		border-radius: 5px;
		// margin-bottom: 25px;
		// background: #eee;

		img {
			padding: 7px;
			box-sizing: border-box;
			width: 38px;
			height: 38px;
			border-radius: $themeRadius;
			// margin: 0 10px;
		}

		.context {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			line-height: 24px;
			min-width: 40px;
			max-width: calc(100% - 40px);
			padding: 7px 0;
			font-size: 14px;
			white-space: pre-wrap;
		}
	}

	/* 设置动画 */
	.point-flicker {
		display: inline-block;
		width: 4px;
		height: 100%;
		background-color: #2d97fa;
		animation: warn 1.5s ease-out 0s infinite;
	}

	@keyframes warn {
		0% {
			opacity: 1;
		}

		25% {
			opacity: 0.25;
		}

		50% {
			opacity: 0.5;
		}

		75% {
			opacity: 0.75;
		}

		100% {
			opacity: 1;
		}
	}
</style>
